<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品页面</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/products.css') }}">
</head>
<body>
    <div class="container">
        <header>
            <h1>产品列表</h1>
            <nav>
                <a href="{{ url_for('home') }}">主页</a>
            </nav>
        </header>

        <div class="content">
            <aside class="categories">
                <h2>分类</h2>
                <ul>
                    <li><a href="{{ url_for('products_page') }}">全部</a></li>
                    {% for category in categories %}
                    <li><a href="{{ url_for('products_page', category=category) }}">{{ category }}</a></li>
                    {% endfor %}
                </ul>
            </aside>

            <section class="product-list">
                <h2>产品</h2>
                <div class="sort-options">
                    <label for="sort">排序:</label>
                    <select id="sort" onchange="sortProducts()">
                        <option value="name" {% if order_by == 'name' %}selected{% endif %}>名称</option>
                        <option value="price" {% if order_by == 'price' %}selected{% endif %}>价格</option>
                        <option value="popularity" {% if order_by == 'popularity' %}selected{% endif %}>热度</option>
                    </select>
                    <select id="order" onchange="sortProducts()">
                        <option value="asc" {% if order_dir == 'asc' %}selected{% endif %}>升序</option>
                        <option value="desc" {% if order_dir == 'desc' %}selected{% endif %}>降序</option>
                    </select>
                </div>
                <ul>
                    {% for product in products %}
                    <li>
                        <h3>{{ product['name'] }}</h3>
                        <p>描述: {{ product['description'] }}</p>
                        <p>价格: ${{ product['price'] }}</p>
                        <p>分类: {{ product['category'] }}</p>
                        <p>热度: {{ product['popularity'] }}</p>
                        {% if product['image'] %}
                        <img src="data:image/png;base64,{{ product['image'] }}" alt="{{ product['name'] }}">
                        {% endif %}
                        <form action="{{ url_for('add_to_cart') }}" method="post">
                            <input type="hidden" name="product_id" value="{{ product['id'] }}">
                            <button type="submit">加入购物车</button>
                        </form>
                    </li>
                    {% endfor %}
                </ul>
                <div class="pagination">
                    {% if page > 1 %}
                    <a href="{{ url_for('products_page', page=page-1, order_by=order_by, order_dir=order_dir) }}">&laquo; 上一页</a>
                    {% endif %}
                    {% for p in range(1, total_pages + 1) %}
                    {% if p == page %}
                    <span>{{ p }}</span>
                    {% else %}
                    <a href="{{ url_for('products_page', page=p, order_by=order_by, order_dir=order_dir) }}">{{ p }}</a>
                    {% endif %}
                    {% endfor %}
                    {% if page < total_pages %}
                    <a href="{{ url_for('products_page', page=page+1, order_by=order_by, order_dir=order_dir) }}">下一页 &raquo;</a>
                    {% endif %}
                </div>
            </section>
        </div>

        <div class="recommended">
            <h2>推荐产品</h2>
            <ul>
                {% for product in recommended %}
                <li>
                    <h3>{{ product['name'] }}</h3>
                    <p>描述: {{ product['description'] }}</p>
                    <p>价格: ${{ product['price'] }}</p>
                    <p>分类: {{ product['category'] }}</p>
                    <p>热度: {{ product['popularity'] }}</p>
                    {% if product['image'] %}
                    <img src="data:image/png;base64,{{ product['image'] }}" alt="{{ product['name'] }}">
                    {% endif %}
                    <form action="{{ url_for('add_to_cart') }}" method="post">
                        <input type="hidden" name="product_id" value="{{ product['id'] }}">
                        <button type="submit">加入购物车</button>
                    </form>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <script>
        function sortProducts() {
            const sortValue = document.getElementById('sort').value;
            const orderValue = document.getElementById('order').value;
            const url = new URL(window.location.href);
            url.searchParams.set('order_by', sortValue);
            url.searchParams.set('order_dir', orderValue);
            window.location.href = url.toString();
        }
    </script>
</body>
</html>
